<template>
<div>
    <div v-if="asdfghj" class='container'>
    <div class="tag">
      <el-row type="flex" justify="space-around" style="height:40px">
        <el-col>
          <span>
           【题型】 :  {{questionDetail.questionType | filterType}}
          </span>
        </el-col>
        <el-col>
          <span>
           【编号】 :  {{questionDetail.id}}
          </span>
        </el-col>
        <el-col>
          <span>
           【难度】 :  {{questionDetail.difficulty | filterDiff}}
          </span>
        </el-col>
        <el-col>
          <span>
           【标签】 :  {{questionDetail.tags}}
          </span>
        </el-col>
      </el-row>
      <el-row type="flex" justify="space-around" style="height:40px">
        <el-col>
          <span>
           【学科】 :  {{questionDetail.subjectName}}
          </span>
        </el-col>
        <el-col>
          <span>
           【目录】 :  {{questionDetail.directoryName}}
          </span>
        </el-col>
        <el-col>
          <span>
           【方向】 :  {{questionDetail.direction}}
          </span>
        </el-col>
        <el-col>

        </el-col>
      </el-row>
    </div>
    <hr>
    <div class="question">
     <div>【题干】: </div>
     <div class="text" v-html="questionDetail.question">  </div>
     <div class="radio" v-if="questionDetail.questionType == 1">
        <p>单选题 选项：（以下选中的选项为正确答案）</p>
        <el-radio-group v-model="radio1">
         <el-radio v-for="(obj,index) in questionDetail.options" :key="index" :label="obj.isRight">{{obj.title}}</el-radio>
        </el-radio-group>
     </div>
     <div class="checkbox" v-if="questionDetail.questionType == 2">
       <p>多选题 选项：（以下选中的选项为正确答案）</p>
         <el-checkbox-group v-model="checkList">
           <el-checkbox v-for="(obj,index) in questionDetail.options" v-model=" obj.isRight" :key="index" :label="obj.title" ></el-checkbox>
         </el-checkbox-group>
     </div>

    </div>
    <hr>
    <div >
     <div>【参考答案】:<el-button type="danger" @click="answerShow = true">视频答案预览</el-button></div>
     <video style="width:400px;height:300px" v-if="answerShow" :src="questionDetail.videoURL" controls="controls" ></video>
     <hr>
     <div>
       【答案解析】： <div  class="answer"  v-html="questionDetail.answer"></div>
     </div>

     <hr>
     <div>【题目备注】： {{questionDetail.remarks}}</div>
    </div>
    <div class="btn">
    <el-button  type="primary" @click="closeDialog">关闭</el-button>

    </div>
  </div>

   <div v-else class='container'>
      <el-row :gutter="24" class="rowBox">
        <el-col :span="6">
          <div>
            【题型】：<span v-if="allData.questionType ==='1'" >单选</span>
            <span v-if="allData.questionType ==='2'" >多选</span>
            <span v-if="allData.questionType ==='3'" >简答</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
               【编号】：<span v-text="allData.id" ></span>
          </div>
          </el-col>
        <el-col :span="6">
          <div>
             【难度】：<span v-text="allData.subjectName"></span>
          </div>
          </el-col>
        <el-col :span="6">
          <div>
             【标签】：<span v-text="allData.tags"></span>
          </div>
          </el-col>
      </el-row>
       <el-row :gutter="24" class="rowBox" style="  border-bottom: 1px;border-bottom-style: solid" >
        <el-col :span="6">
          <div>
            【学科】：<span v-text="allData.subjectName"></span>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
               【目录】：<span  v-text="allData.directoryName"></span>
          </div>
          </el-col>
        <el-col :span="6">
          <div>
             【方向】：<span v-text="allData.direction"></span>
          </div>
          </el-col>
      </el-row>
       <el-row :gutter="24" class="rowBox" style="  border-bottom: 1px;border-bottom-style: solid" >
        <el-col :span="24">
          <div class="divBox">【题干】：</div>
          <div class="divBox" v-html="allData.question" style="color:Blue"></div>
          <div class="divBox" v-if="allData.questionType ==='1'|| allData.questionType ==='2'">
           <span v-if="allData.questionType ==='1'" >单选</span>
          <span v-if="allData.questionType ==='2'" >多选</span>
           选项 : (以下选中的选项为正确答案)</div>
           <div v-if="allData.questionType ==='1'|| allData.questionType ==='2'">
            <div class="divBox" v-for="(item,index) in allData.options" :key=index v-show="allData.questionType ==='1'">
              <!-- <el-radio v-model="item.isRight" :label="item.isRight">
                {{item.title}}
            </el-radio> -->
              <el-radio-group :value ="radio">
                <el-radio :label="item.isRight"   >  {{item.title}}</el-radio>
              </el-radio-group>
            </div>

             <div class="divBox"  v-show="allData.questionType ==='2'">
                <el-checkbox-group :value="checkList" v-for="(item,index) in allData.options" :key=index>
                    <el-checkbox :label="item.isRight"  >  {{item.title}}</el-checkbox>
                </el-checkbox-group>
                <!-- <el-checkbox v-model="checked"> {{item.title}} </el-checkbox> -->
            </div>

            <!-- <div class="divBox"><el-radio v-model="radio2" label="allData"></el-radio></div>
            <div class="divBox"><el-radio v-model="radio3" label="allData"></el-radio></div>
            <div class="divBox"><el-radio v-model="radio4" label="allData"></el-radio></div> -->
           </div>

        </el-col>
      </el-row>
      <el-row :gutter="24" class="rowBox" style="  border-bottom: 1px;border-bottom-style: solid" >
        <el-col :span="24">
          <div class="divBox">【参考答案】：  <el-button type="danger" @click="videoShow=true">视频答案预览</el-button>
          </div>
          <video width="320" height="240" :src="allData.videoURL" controls v-if="videoShow"></video>
        </el-col>
      </el-row>
       <el-row :gutter="24" class="rowBox" style="  border-bottom: 1px;border-bottom-style: solid" >
        <el-col :span="24">
          <div class="divBox">【答案解析】：<span v-html="allData.answer"></span></div>
        </el-col>
      </el-row>
       <el-row :gutter="24" class="rowBox" style="  border-bottom: 1px;border-bottom-style: solid" >
        <el-col :span="24">
          <div class="divBox">【题目备注】：<span v-html="allData.remarks"></span></div>
        </el-col>
      </el-row>
  </div>
</div>
</template>

<script>
import { detail as detail1, detail } from '@/api/hmmm/questions'
import { difficulty, questionType } from '@/api/hmmm/constants'
export default {
  name: 'questionPreiew',
  data () {
    return {
      questionDetail: {},
      answerShow: false,
      radio1: 1,
      checkList1: [],
      radio: 1, // 单选框
      checkList: [1], // 多选框
      allData: {}, // 所有数据
      videoShow: false // 视频隐藏

    }
  },
  props: {
    questionId: {
      type: Number
    },
    childID: Number,
    asdfghj: {
      default: false,
      type: Boolean
    }
  },
  created () {
    if (this.asdfghj) {
      this.getQuestionDetail()
      return
    }
    this.choice({ id: this.childID })
  },
  methods: {
    async getQuestionDetail () {
      const res = await detail1({ id: this.questionId })
      // console.log(res)
      this.questionDetail = res.data
      this.checkData(res.data.options)
    },
    checkData (arr) {
      const checkList = arr.filter(item => item.isRight === 1).map(item => item.title)
      // console.log(checkList)
      this.checkList1 = checkList
    },
    closeDialog () {
      this.$emit('close')
    },
    async choice (data) {
      const res = await detail(data)
      this.allData = res.data
      console.log(this.allData)
    }
  },
  filters: {
    filterType (val) {
      const obj = questionType.find(obj => {
        return obj.value == val
      })
      return obj ? obj.label : '未知'
    },
    filterDiff (val) {
      const obj = difficulty.find(obj => {
        return obj.value == val
      })
      return obj ? obj.label : '未知'
    }
  }
}
</script>

<style scoped >
.question{
  line-height: 20px;
}
.question .text{
  color: blue;
}
 .answer{
  display:inline-block

}
.btn{
  text-align: center;
}
.radio label{
  height: 30px;
  display:block
}
.checkbox label{
  height: 30px;
  display:block
}
.rowBox{

  padding: 10px 0;

}
.divBox{
  padding: 10px 0;
}
li{
  list-style: none;
}
</style>
